<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<block v-for="(item, index) in categories" :key="item.id">
				<view :class="index === active ? 'active' : ''" @click="change(item.id, index)">{{item.title}}</view>
			</block>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<template v-if="images.length === 0">
				<text>暂无数据</text>
			</template>
			<template v-else>
				<block v-for="(item, imagesIndex) in images" :key="item.id">
					<view class="item">
						<image @click="previewImg(imagesIndex)" :src="item.img_url"></image>
						<text>{{item.title}}</text>
					</view>
				</block>
			</template>
			
		</scroll-view>
	</view>
</template>

<script>
	import {getPicsCate, getImages} from '../../../api/index/pics.js';
	export default {
		data() {
			return {
				categories: [],
				active: 0,
				images: []
			}
		},
		onLoad() {
			// 获取图片分类
			this.getPicsCate();
		},
		methods: {
			/**
			 * 获取图片分类
			 */
			getPicsCate() {
				getPicsCate().then(res => {
					this.categories = res.data.message;
					if (this.categories.length !== 0) {
						let id = this.categories[0].id;
						this.change(id, 0);
					}
				})
			},
			/**
			 * 点击图片分类
			 * @param {Object} id 图片分类id
			 * @param {Object} index 图片分类的索引值
			 */
			change(id, index) {
				this.active = index;
				getImages(id).then(res => {
					this.images = res.data.message;
				})
			},
			/**
			 * 图片预览
			 * @param {Object} imagesIndex 点击图片的索引
			 */
			previewImg(imagesIndex) {
				uni.previewImage({
					current: imagesIndex,
					urls: this.images.map(item => item.img_url)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "~@/static/css/index/pics.scss";	
</style>
